<template>
    <div id="department_detail">
      <Row type='flex' justify="center" style="padding-top:100px">
        <Col>
            <div class="header-title">查看组织详情</div>
            <div class="content-detail">
              <Form :label-width="90">
                <FormItem label="上级组织：" prop="superior_department">
                  <p>{{formValidate.parentOrgName}}</p>
                </FormItem>
                <FormItem label="组织名称：" prop="department">
                  <p>{{formValidate.orgName}}</p>
                </FormItem>
                <FormItem label="组织编码：" prop="orgCode">
                  <p>{{formValidate.orgCode}}</p>
                </FormItem>
                <FormItem label="组织标签：" prop="groupTagList">
                  <p>{{formValidate.groupTagList}}</p>
                </FormItem>
                <FormItem label="排序号：" prop="sort">
                  <p>{{formValidate.sortNum}}</p>
                </FormItem>
                <FormItem label="组织类型：" prop="isShop">
                  <p>{{formValidate.orgType === 0 ? '职能部门': formValidate.orgType === 1 ? '门店' : formValidate.orgType === 2 ? '区域' : formValidate.orgType === 3 ? '片区' : formValidate.orgType === 4 ? '总部' : ''}}</p>
                </FormItem>
                <FormItem label="组织描述：" prop="des">
                  <p style="width:475px">{{formValidate.remark}}</p>
                </FormItem>
              </Form>
            </div>
        </Col>
      </Row>
    </div>
</template>

<script>
import { getOrgDetail } from '@/api/system/org'
export default {
  name: 'organization_detail',
  data () {
    return {
      formValidate: {}
    }
  },
  mounted () {
    getOrgDetail({ 'merchantId': this.$store.state.user.merchantId, id: this.$route.params.id }).then(res => {
      if (res.data.status === 200) {
        this.formValidate = res.data.data
        this.formValidate.groupTagList = this.formValidate.groupTagList.length > 0 ? this.formValidate.groupTagList[0].tagName : ''
      } else {
        this.$Message.error(`${res.data.error}`)
      }
    })
  }
}
</script>
<style lang="less" scoped>
#department_detail{
  .header-title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
    margin: 17px 36px;
  }
  .content-detail {
    font-size: 12px;
    margin-left: 64px;
    .ivu-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
